<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/bug.css">
    <link rel="stylesheet" href="css/nlp.css">

    <!-- <link rel="stylesheet" href="font/remixicon.css"> -->
    <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">


</head>

<body>
    <div class="container-fluid">
        <!-- 头部 -->
        <div class="header">
            <!-- logo -->
            <div class="logo">
                <span class="text">你好，南雨</span>
            </div>
            <!-- 搜索 -->
            <div class="search">
                <input type="search" name="search" placeholder="Search...">
                <i class="ri-search-line" id="search-icon"></i>
            </div>
            <!-- 头像 -->
            <div class="avatar">
                <img class="avatar-img" src="https://picsum.photos/id/1025/400/400" alt="">
                <ul>
                    <li><a href="#">个人中心</a></li>
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">退出登录</a></li>
                </ul>
            </div>


        </div>
        <!-- 内容 -->
        <div class="body-container">
            <!-- 左菜单 -->
            <div class="left-container">
                <ul>
                    <li>
                        <a href="hjl.html">
                            <i class="ri-code-box-line"></i>&nbsp; BILSTM-Attention
                        </a>
                    </li>
                    <li>
                        <a href="jy.html">
                            <i class="ri-code-box-line"></i>&nbsp; LSTM
                        </a>
                    </li>
                    <li>
                        <a href="hsq.html">
                            <i class="ri-code-box-line"></i>&nbsp; BERT+TextCNN
                        </a>
                    </li>
                    <li>
                        <a href="dzj.html">
                            <i class="ri-code-box-line"></i>&nbsp; CNN+LSTM
                        </a>
                    </li>
                    <li>
                        <a href="gq.html">
                            <i class="ri-code-box-line"></i>&nbsp; 机器学习
                        </a>
                    </li>

                </ul>
            </div>
            <!-- 右内容 -->
            <div class="right-container">
                <div class="content-container">
                    <!-- 目录 -->
                    <div class="source-path">
                        <ul>
                            <i class="ri-home-2-line" id="source-home"></i>
                            <li>
                                <a href="hsq.html">home</a>
                            </li>/
                            <li>
                                <a href="hsq.html" class="active">胡势权</a>
                            </li>
                        </ul>
                    </div>



                    <div class="bug-data">
                        <div class="intro">
                            <div>
                                <input type="text" name="zh-text" id="zh-text">
                                <button class="update-project-btn" id="zh-submit">中文测试</button>
                                <div class="zh-result" id="zh-text-result">
                                    <div>预测类别：&nbsp;<span id="zh-label"></span></div>
                                    <div>Precision:&nbsp;<span id="zh-pre"></span></div>
                                    <div>Recall:&nbsp;<span id="zh-recall"></span></div>
                                    <div>F1:&nbsp;<span id="zh-f1"></span></div>

                                </div>
                            </div>
                        </div>
                        <!-- 右项目列表 -->
                        <div class="bug-list">
                            <input type="text" name="en-text" id="en-text">
                            <button class="add-bug-btn" id="en-submit">英文测试</button>
                            <div class="en-result" id="en-text-result">
                                <div>预测类别：&nbsp;<span id="en-label"></span></div>
                                <div>Precision:&nbsp;<span id="en-pre"></span></div>
                                <div>Recall:&nbsp;<span id="en-recall"></span></div>
                                <div>F1:&nbsp;<span id="en-f1"></span></div>
                            </div>
                            <h3 style="margin-top: 20px; margin-left: 100px;">请不要同时测试模型，等待中文模型出结果之后再测试英文模型</h3>
                        </div>
                    </div>
                    <!-- footer -->
                    <div class="footer">
                        <h3>数科192胡势权</h3>
                    </div>
                </div>
            </div>

        </div>


        <script src="js/jquery-3.4.1.js"></script>
        <!-- 旋转动画 -->
        <script src="js/jQueryRotate.js"></script>
        <!-- ping -->
        <script src="js/bug.js"></script>

        <script>
            var zh_text = document.getElementById('zh-submit')
            var zh_result = document.getElementById('zh-text-result')
            var zh_label = document.getElementById('zh-label')
            var zh_pre = document.getElementById('zh-pre')
            var zh_recall = document.getElementById('zh-recall')
            var zh_f1 = document.getElementById('zh-f1')

            zh_text.addEventListener('click', function() {
                alert("请求已发送，部分模型加载较慢，请勿重复提交！！！")
                values = $('#zh-text').val()
                var xhr = new XMLHttpRequest();
                xhr.open('POST', 'http://127.0.0.1:5000/model/zh/1');
                xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
                var json = {
                    "zh_text": values
                }
                xhr.send(JSON.stringify(json))
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        var r = xhr.responseText;
                        var result1 = JSON.parse(r);
                        zh_label.innerText = result1['data'][0]
                        zh_pre.innerText = result1['data'][1]
                        zh_recall.innerText = result1['data'][2]
                        zh_f1.innerText = result1['data'][3]

                    }
                }
            })
        </script>
        <script>
            var en_text = document.getElementById('en-submit')
            var en_result = document.getElementById('en-text-result')
            var en_label = document.getElementById('en-label')
            var en_pre = document.getElementById('en-pre')
            var en_recall = document.getElementById('en-recall')
            var en_f1 = document.getElementById('en-f1')
            en_text.addEventListener('click', function() {
                alert("请求已发送，部分模型加载较慢，请勿重复提交！！！")
                en_values = $('#en-text').val()
                var xhr1 = new XMLHttpRequest();
                xhr1.open('POST', 'http://127.0.0.1:5000/model/en/1');
                xhr1.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
                var en_json = {
                    "en_text": en_values
                }
                xhr1.send(JSON.stringify(en_json))
                xhr1.onreadystatechange = function() {
                    if (xhr1.readyState == 4 && xhr1.status == 200) {
                        var r2 = xhr1.responseText;
                        var result2 = JSON.parse(r2);
                        en_label.innerText = result2['data'][0]
                        en_pre.innerText = result2['data'][1]
                        en_recall.innerText = result2['data'][2]
                        en_f1.innerText = result2['data'][3]
                    }
                }
            })
        </script>


</body>

</html>